<template>
	<view class="index">
		<bangs></bangs>
		<view class="d-flex a-center" style="height: 90rpx;">
			<!-- 左边 -->
			<view style="width: 85rpx;" class="d-flex a-center j-center">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
			<!-- 中间 -->
			<view class="flex-1 bg-light rounded d-flex a-center text-light-muted" style="height: 65rpx;" @click="openSearch">
				<text class="iconfont icon-sousuo mx-2"></text>
				搜索
			</view>
			<!-- 右边 -->
			<view style="width: 85rpx;" class="d-flex a-center j-center">
				<text class="iconfont icon-richscan_icon"></text>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" indicator-active-color="#fff" :autoplay="true" :interval="3000" :duration="1000">
			<block v-for="(item,index) in HeaderBanner" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<image :src="item.image" mode="widthFix"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<!-- 分类 -->
		<view class="row j-center m-2">
			<block v-for="(item,index) in HeaderCategory" :key="index">
				<view class="d-flex span-4 flex-column j-center a-center" @click="openlist(item.id)">
					<img :src="item.IMAGE|filterstring"  style="width: 60rpx;height: 60rpx;">
					<text class="font-sm">{{item.MALL_CATEGORY_NAME}}</text>
				</view>
			</block>
		</view>
		
		<!-- 广告图 -->
		<image :src="adBanner" mode="widthFix"></image>
		
		<divider></divider>
		<!--商品推荐-->
		<card headTitle="商品推荐">
			<swiper-scroll :recommend="ProductsFeatured"></swiper-scroll>
		</card>
		<divider></divider>
		<!--热门商品-->
		<card headTitle="热门商品">
			<view class="row j-sb">
				<block v-for="(item,index) in Hotproduct" :key="index">
					<common-list :item="item"></common-list>
				</block>
			</view>
		</card>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import card from "@/components/common/card.vue";
	import SwiperScroll from "@/components/index/swiper-scroll.vue";
	import commonList from "@/components/common/common-list.vue"
	export default {
		components:{
			card,
			SwiperScroll,
			commonList
		},
		data() {
			return {
				HeaderBanner:[],
				iStatusBarHeight:'',
				HeaderCategory:[],
				ProductsFeatured:[],
				Hotproduct:[],
				adBanner:'http://images.baixingliangfan.cn/advertesPicture/20180404/20180404085441_850.gif'
			}
		},
		onLoad() {
			this.getimage();
			this.getcategory();
			this.getProductsFeatured();
			this.getHot();
		},
		filters:{
			filterstring(str){
				return str.replace(/\\/g,'');
			}
		},
		methods: {
			openSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			//轮播图
			getimage(){
				this.$H.get('/index/banner').then((res)=>{
					this.HeaderBanner = res.msg;
					this.setbanner(res.msg);
				})
			},
			//分类
			getcategory(){
				this.$H.get('/category/getCategory').then(res=>{
					this.HeaderCategory= res.msg;
				})
			},
			//商品推荐
			getProductsFeatured(){
				this.$H.get('/index/recommend').then(res=>{
					this.ProductsFeatured = res.msg;
				}) 
			},
			//热门商品
			getHot(){
				this.$H.get('/index/hot').then(res=>{
					this.Hotproduct = res.msg;
				})
			},
			openlist(id){
				uni.navigateTo({
					url:'../listclass/listclass?id='+id
				})
			},
			...mapMutations([
				'setbanner'
			])
		}
	}
</script>

<style>
	.index{
		padding-bottom: var(--window-bottom);	
	}
</style>
